<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block data-th-replace="/adminlte/base::base-head"></th:block>
<style type="text/css">
</style>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="modal fade" id="dialog-log-show">
    <div class="modal-dialog">
        <div class="modal-content"
             style="border-radius: 5px; margin-top: 10%; border-radius: 5px;">
            <div class="modal-header">
                <h4 class="modal-title">数据</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form role="form" action="/roles" method="post">
                <div class="modal-body">
					<textarea rows="10" cols="63" data-t="show" autofocus="autofocus"></textarea>
                </div>
            </form>
        </div>
    </div>
</div>
	<div class="wrapper">
		<th:block data-th-replace="/adminlte/base::base-navbar"></th:block>
		<th:block data-th-replace="/adminlte/base::base-main-sidebar"></th:block>
		<div class="content-wrapper">
			<th:block data-th-replace="/adminlte/base::base-content-header"></th:block>
			<section class="content">
				<div class="container-fluid">
					<div class="card">
						<div class="card-header with-border">
							<div class="row ml-1 mt-1">
								<div class="input-group">
									<div class="input-group-prepend">
										<button type="submit" class="btn btn-default"
											data-get-search="#search-log" onclick="changeThis(this)">
											<i class="fas fa-search"></i>
										</button>
									</div>
									<input id="search-log" type="text" name="search"
										class="form-control" placeholder="Search"
										autofocus="autofocus" data-get-search="#search-log"
										onkeyup="enterThis(this, changeThis)">
								</div>
							</div>
						</div>
						<div class="card-body">
							<div class="table-responsive">
								<table id="user-table"
									class="table table-bordered table-hover table-striped">
									<colgroup>
										<col width="50" />
										<col width="90" />
										<col width="60" />
										<col />
										<col width="90" />
										<col width="80" />
										<col width="200"/>
										<col width="200"/>
										<col width="160"/>
										<col width="160" />
										<col width="160" />
									</colgroup>
									<thead>
										<tr>
											<th>ID</th>
											<th>IP</th>
											<th>用户</th>
											<th>请求地址</th>
											<th>请求方法</th>
											<th>状态码</th>
											<th>请求数据</th>
											<th>返回数据</th>
											<th>耗时/毫秒</th>
											<th>请求时间</th>
											<th>返回时间</th>
										</tr>
									</thead>
									<tbody>
										<tr data-th-each="log: ${logPage.data}" th:with="dur=${LocalDateTimeUtils.between(log.requestTime, log.responseTime)}, class=${dur>999?'text-red':''}">
											<td data-th-utext="${log.id}" th:class="${class}">用户名</td>
											<td data-th-utext="${log.ip}" th:class="${class}">用户名</td>
											<td data-th-utext="${log.userId}" th:class="${class}">用户名</td>
											<td data-th-utext="${log.url}" th:class="${class}">用户名</td>
											<td data-th-utext="${log.method}" th:class="${class}">用户名</td>
											<td data-th-utext="${log.statusCode}" th:class="${class}">用户名</td>
											<td>
											 <div class="row">
											     <button
                                                    class="btn btn-info"
                                                    data-dialog="show"
                                                    data-url="#dialog-log-show"
                                                    th:data-dialog-t-show="${log.request}">查看数据</button>
                                                 <button
                                                    class="btn btn-info ml-1"
                                                    th:data-copy="${log.request}" onclick="copyText(this)">复制数据</button>
											 </div>
											</td>
											<td>
											 <div class="row">
                                                 <button
                                                    class="btn btn-info"
                                                    data-dialog="show"
                                                    data-url="#dialog-log-show"
                                                    th:data-dialog-t-show="${log.response}">查看数据</button>
                                                 <button
                                                    class="btn btn-info ml-1"
                                                    th:data-copy="${log.response}" onclick="copyText(this)">复制数据</button>
                                             </div>
											</td>
											<td data-th-utext="${dur}" th:class="${class}">操作时间</td>
											<td data-th-utext="${LocalDateTimeUtils.format(log.requestTime)}" th:class="${class}">操作时间</td>
											<td data-th-utext="${LocalDateTimeUtils.format(log.responseTime)}" th:class="${class}">操作时间</td>
										</tr>
									</tbody>
								</table>
							</div>
							<th:block data-th-replace="/adminlte/base::pageNav(${logPage},'条记录')"></th:block>
						</div>
					</div>
				</div>
			</section>
		</div>
		<th:block data-th-replace="/adminlte/base::base-footer"></th:block>
		<th:block data-th-replace="/adminlte/base::base-control-sidebar"></th:block>
	</div>
	<script src="/kaibes/js/extend.js"></script>
	<script type="text/javascript">
		function copyText(obj) {
	        let text = $(obj).attr("data-copy");
	        var aux = document.createElement("input"); 
	        aux.setAttribute("value", text);
	        document.body.appendChild(aux);
	        aux.select();
	        document.execCommand("copy"); 
	        document.body.removeChild(aux);
	        toast.info("已复制内容到剪切板！", undefined, 2000);
	    }
	</script>
</body>
</html>